<template>
  <div class="dataPageListComponent" v-if="control">
    <collapseComponent
      v-for="(cr, crIndex) in control.right"
      :key="cr.id"
      :title="cr.name"
      direction="column"
      :open="cr.open"
      :rightIndex="crIndex"
      @switchCollapse="switchCollapse"
    >
      <div
        class="catalog"
        v-for="(crc, crcIndex) in cr.catalog"
        :key="crc.id"
        :style="{ display: crc.display }"
      >
        <component
          v-bind:is="crc.controlName"
          v-if="crc.display === 'block'"
          :item="crc"
          :rightIndex="crIndex"
          :catalogIndex="crcIndex"
          :id="control.id"
          @updateParent="updateParent"
        ></component>
      </div>
    </collapseComponent>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "dataPageListComponent",
  data() {
    return {
      control: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["controlsIndex", "controlData"],
  components: {
    collapseComponent: () => import("../../../components/collapseComponent"),
    chooseIconComponent: () => import("./lone/chooseIconComponent"),
    chooseImageComponent: () => import("./lone/chooseImageComponent"),
    colorComponent: () => import("./lone/colorComponent"),
    radioComponent: () => import("./lone/radioComponent"),
    sliderComponent: () => import("./lone/sliderComponent"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //从单个子组件中更新到大类组件这里来
    updateParent(params) {
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;

      //模块设置

      //标题文字颜色
      if (pe === "titleFontColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //数据文字颜色
      if (pe === "dataFontColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //背景颜色
      if (pe === "dataPageBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //背景图片
      if (pe === "dataPageBgImg") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //查看文字颜色
      if (pe === "dataPageLinkColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //模块间距
      if (pe === "moduleSpace") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //上间距
      if (pe === "modulePT") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //下间距
      if (pe === "modulePB") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //左右间距
      if (pe === "modulePLR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //上边角
      if (pe === "moduleBTR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //下边角
      if (pe === "moduleBBR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }



      //背景颜色
      if (pe === "wrapperBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }

      //背景图片
      if (pe === "wrapperBgImg") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //上间距
      if (pe === "wrapperPT") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //下间距
      if (pe === "wrapperPB") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //左右间距
      if (pe === "wrapperPLR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //上边角
      if (pe === "wrapperBTR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }
      //下边角
      if (pe === "wrapperBBR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = false;
      }


    //悬浮按钮设置

      //显示/隐藏按钮1
      if (pe === "dataPageFloatBtn1Display") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        if(pv) {
          //显示
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "dataPageFloatBtnImg1") { row.display = "block"}
                if(row.ename == "dataPageFloatBtnIcon1") { row.display = "block"}
                if(row.ename == "floatBtn1Positon") { row.display = "block"}
                if(row.ename == "floatBtn1OffsetUpAndDown") { row.display = "block"}
                if(row.ename == "floatBtn1OffsetLeftAndRight") { row.display = "block"}
                if(row.ename == "floatBtnIconColor") { row.display = "block"}
                if(row.ename == "floatBtnBgColor") { row.display = "block"}
                if(row.ename == "floatBtnBorderColor") { row.display = "block"}
              })
            }
          })
      
        }else{ 
          //隐藏
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => { 
                if(row.ename == "dataPageFloatBtnImg1") { row.display = "none"}
                if(row.ename == "dataPageFloatBtnIcon1") { row.display = "none"}
                if(row.ename == "floatBtn1Positon") { row.display = "none"}
                if(row.ename == "floatBtn1OffsetUpAndDown") { row.display = "none"}
                if(row.ename == "floatBtn1OffsetLeftAndRight") { row.display = "none"}
                if(row.ename == "dataPageFloatBtn2Display" && row.value == false) { 
                  item.catalog.forEach(cat => {
                    if(cat.ename == "floatBtnIconColor") {cat.display = "none"}
                    if(cat.ename == "floatBtnBgColor") {cat.display = "none"}
                    if(cat.ename == "floatBtnBorderColor") {cat.display = "none"}
                  })
                }
              })
            }
          })
        }
      }

      //按钮1图片
      if (pe === "dataPageFloatBtnImg1") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮1图标
      if (pe === "dataPageFloatBtnIcon1") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮1偏移位置
      if (pe === "floatBtn1Positon") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮1上下偏移量
      if (pe === "floatBtn1OffsetUpAndDown") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮1左右偏移量
      if (pe === "floatBtn1OffsetLeftAndRight") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = false;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //显示/隐藏按钮2
      if (pe === "dataPageFloatBtn2Display") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        if(pv) {
          //显示
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "dataPageFloatBtnImg2") { row.display = "block"}
                if(row.ename == "dataPageFloatBtnIcon2") { row.display = "block"}
                if(row.ename == "floatBtn2Positon") { row.display = "block"}
                if(row.ename == "floatBtn2OffsetUpAndDown") { row.display = "block"}
                if(row.ename == "floatBtn2OffsetLeftAndRight") { row.display = "block"}
                if(row.ename == "floatBtnIconColor") { row.display = "block"}
                if(row.ename == "floatBtnBgColor") { row.display = "block"}
                if(row.ename == "floatBtnBorderColor") { row.display = "block"}
              })
            }
          })
        }else{
          //隐藏
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "dataPageFloatBtnImg2") { row.display = "none"}
                if(row.ename == "dataPageFloatBtnIcon2") { row.display = "none"}
                if(row.ename == "floatBtn2Positon") { row.display = "none"}
                if(row.ename == "floatBtn2OffsetUpAndDown") { row.display = "none"}
                if(row.ename == "floatBtn2OffsetLeftAndRight") { row.display = "none"}
                if(row.ename == "dataPageFloatBtn1Display" && row.value == false) {
                  item.catalog.forEach(cat => {
                    if(cat.ename == "floatBtnIconColor") {cat.display = "none"}
                    if(cat.ename == "floatBtnBgColor") {cat.display = "none"}
                    if(cat.ename == "floatBtnBorderColor") {cat.display = "none"}
                  })
                }
              })
            }
          })
        }
      }

      //按钮2图片
      if (pe === "dataPageFloatBtnImg2") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮2图标
      if (pe === "dataPageFloatBtnIcon2") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮2偏移位置
      if (pe === "floatBtn2Positon") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮2上下偏移量
      if (pe === "floatBtn2OffsetUpAndDown") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //按钮2左右偏移量
      if (pe === "floatBtn2OffsetLeftAndRight") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = false;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //悬浮按钮图标色
      if (pe === "floatBtnIconColor") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //悬浮按钮背景颜色
      if (pe === "floatBtnBgColor") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //悬浮按钮背边框颜色
      if (pe === "floatBtnBorderColor") {
        p.needUpdateMainChild=true;
        p.needUpdateFloatBtn1 = true;
        p.needUpdateFloatBtn2 = true;
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      

     
      //更新到vuex
      this.updateControls(this.control, p);

      //更新到main中的子组件
      if (p.needUpdateMainChild) { 
        const emitName = this.control.ename + this.control.id;
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit(emitName, JSON.stringify(this.control));
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
      this.updateControls(this.control);
    },
    //更新到vuex
    updateControls(control, p) {
      if (this.needUpdate) {
        let controls = this.decorate.controls;
        controls[this.controlsIndex] = JSON.parse(JSON.stringify(control));
        this.$store.dispatch("controls", controls);
        if (p) {
          if(p.needUpdateFloatBtn1) {
            Bus.$emit("updateMain", {
            update: "dataPageFloatBtn1",
            control: JSON.stringify(control)
          });
          }
          if(p.needUpdateFloatBtn2){
            Bus.$emit("updateMain", {
            update: "dataPageFloatBtn2",
            control: JSON.stringify(control)
          });
          }
          if(!p.needUpdateFloatBtn1 && !p.needUpdateFloatBtn2 && p.needUpdateMain){
            Bus.$emit("updateMain");
          }
          
        }
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.dataPageListComponent {
  .catalog {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px 10px 0px;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss">
.dataPageListComponent {
  .vlonSingleColor .title,
  .chooseIconComponent .title,
  .vlonSingleSlider .title,
  .radioComponent .title,
  .chooseIconComponent .title,
  .chooseImageComponent .title{width:120px!important;}
}
</style>
 